<template>
	<view>
		<u-sticky bgColor="#F3F5F7" offsetTop="0" customNavHeight="0">
			<u-status-bar></u-status-bar>
			<view class="top">
				<image @click="back" src="/static/home/back.png" class="top__back" mode=""></image>
				<u-search placeholder="玄幻" height='76rpx' bgColor='#fff' focus color='#000' searchIconSize='44rpx'
					searchIconColor='#000' :actionStyle='actionStyle' v-model="keyword"></u-search>

			</view>
		</u-sticky>
		<view class="biao">
			<view class="biao__title">
				热门标签
			</view>
			<view class="biao__list">
				<view class="biao__list__item" v-for="(item,index) in taglist" :key="index" @click="clicktag(item.name)">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="list">
			<view @click="navto('/pages/home/shudetail')" class="" v-for="(item,index) in booklist" :key="index">
				<bookitem :item="item"></bookitem>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				actionStyle: {
					background: '#51CAEF',
					width: '120rpx',
					height: '72rpx',
					color: "#FFFFFF",
					borderRadius: '36rpx',
					lineHeight: '72rpx',
					fontSize: '28rpx',
					marginLeft: '20rpx'
				},
				taglist: [{
					name: '二次元'
				}, {
					name: '历史'
				}, {
					name: '历史古代'
				}, {
					name: '玄幻'
				}, {
					name: '游戏动漫'
				}, {
					name: '火影'
				}, {
					name: '游戏动漫'
				}, {
					name: '游戏动漫'
				}],
				booklist: [{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
					{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
					{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
					{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
					{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
					{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
					{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
					{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
					{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
					{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
					{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
					{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
					{
						name: '浴火重生:绯色无疆',
						pic: '/static/pic.png',
						ischeck: false,
						zz: '爱虾的鱼'
					},
				],
			};
		},
		methods:{
			clicktag(e){
				this.keyword=e
			}
		}
	}
</script>

<style lang="scss">
	.top {
		height: 88rpx;
		display: flex;
		align-items: center;
		padding: 0 24rpx 10rpx 32rpx;
		
		// border-radius: ;
		&__back {
			width: 52rpx;
			height: 52rpx;
		}
	}

	.biao {
		// width: 750rpx;
		// height: 268rpx;
		padding: 32rpx 32rpx 16rpx;
		// margin-bottom: 32rpx;
		&__title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			line-height: 44rpx;
			margin-bottom: 32rpx;
		}

		&__list {
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			&__item {
				padding: 8rpx 16rpx;
				background: #FFFFFF;
				border-radius: 52rpx 52rpx 52rpx 52rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				margin: 0 16rpx 16rpx 0;
			}
		}
	}
	.list{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
</style>